<template>
  <div class="sibling-a">
    <h3>🧑 兄弟组件 A</h3>
    <button @click="sendMessage">👉 给兄弟 B 发消息</button>
  </div>
</template>

<script setup>
import { inject } from 'vue'

// 注入父组件提供的事件总线
const bus = inject('siblingBus')

function sendMessage() {
  bus.emit('message-from-a', 'A 说：兄弟，吃午饭了吗？🍜')
}
</script>

<style scoped>
.sibling-a {
  border: 2px solid #ff6b6b;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.sibling-a button {
  background-color: #ff6b6b;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
</style>
